<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: LiYansheng
 * @Date: 2023-09-13 01:30:57
 * @LastEditors: CoderXZ
 * @LastEditTime: 2023-10-03 16:48:37
-->
<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}
	</style>
	<script type="text/javascript"
		src="http://api.map.baidu.com/api?type=webgl&v=1.0&ak=EqqXh5CGiOrPBTY4F3yzOxEkbbcgOCjc"></script>
	<script src="https://code.bdstatic.com/npm/jquery@1.12.4/dist/jquery.min.js"></script>
	<title>地图展示</title>
</head>


<body>
	<div>
		经度：<input name="lng" id="lng"></input>
		纬度：<input name="lat" id="lat"></input>
		地址: <input name="address" id="address"></input>
		<button type="submit">提交</button>
		<button onclick="demo()">查轨迹</button>
		<button onclick="clearAll()">清空标记点</button>
	</div>
	<div id="allmap"></div>
</body>

<script type="text/javascript">
	var pointList = [];
	// GL版命名空间为BMapGL
	// 按住鼠标右键，修改倾斜角和角度
	var map = new BMapGL.Map("allmap"); // 创建Map实例
	map.centerAndZoom(new BMapGL.Point(114, 24), 12); // 初始化地图,设置中心点坐标和地图级别
	map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
	var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
	map.addControl(scaleCtrl);
	var zoomCtrl = new BMapGL.ZoomControl(); // 添加缩放控件
	map.addControl(zoomCtrl);
	var cityCtrl = new BMapGL.CityListControl(); // 添加城市列表控件
	map.addControl(cityCtrl);

	//地址解析
	var myGeo = new BMapGL.Geocoder();

	var m; // 声明全局变量保存标注点

	map.addEventListener('click', function (e) {
		var p;
		map.removeOverlay(m);

		$("#lng").val(e.latlng.lng);
		$("#lat").val(e.latlng.lat);
		myGeo.getLocation(new BMapGL.Point(e.latlng.lng, e.latlng.lat), function (res) {
			if (res) {
				$("#address").val(res.address);
			}
		});

		p = new BMapGL.Point(e.latlng.lng, e.latlng.lat);
		console.log(p);
		pointList.push(p);
		console.log(pointList);
		m = new BMapGL.Marker(p);
		// 动态设置标注
		map.addOverlay(m);
	});




	var point = new BMapGL.Point(114, 24);
	var marker = new BMapGL.Marker(point);
	map.addOverlay(marker);


	// 添加标注窗口
	var opts = {
		width: 200,
		height: 100,
		title: "测试点",
		message: "简单介绍xxxx"
	}

	var infoWindow = new BMapGL.InfoWindow("地址：测试xxx", opts);
	marker.addEventListener("click", function () {
		map.openInfoWindow(infoWindow, point); //开启信息窗口
	})



	var point1 = new BMapGL.Point(114.14717837470614, 24.087914660462673);
	var myIcon = new BMapGL.Icon("https://t7.baidu.com/it/u=4025391936,4199401746&fm=193", new BMapGL.Size(30,
		30)); // 自定义图标路径和图标大小
	var marker1 = new BMapGL.Marker(point1, {
		icon: myIcon
	});


	// 开启辅助定位
	map.addOverlay(marker1);

	// 开启SDK辅助定位
	var me;
	var geolocation = new BMapGL.Geolocation();
	geolocation.enableSDKLocation();
	geolocation.getCurrentPosition(function (r) {
		if (this.getStatus() == BMAP_STATUS_SUCCESS) {
			me = r.point;
			var mk = new BMapGL.Marker(r.point);
			map.addOverlay(mk);
			map.panTo(r.point);
			// alert('您的位置：' + r.point.lng + ',' + r.point.lat);
		} else {
			alert('failed' + this.getStatus());
		}
	});

	// 绘制指向线

	var polyline;
	function demo() {
		// 绘制指向线
		    polyline = new BMapGL.Polyline(pointList, {
			strokeColor: "red",
			strokeWeight: 6,
			strokeOpacity: 0.5
		});
		map.addOverlay(polyline);
	}

	function clearAll(){
		map.removeOverlay(polyline);
		pointList=[];
	}

	//
</script>